<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="详情" width="1000px">
    <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
    <el-row>
      <div class="detailsTop">
        <span>维修申请单</span>
        <el-divider content-position="right">{{ detailInfo.applyNo }}</el-divider>
      </div>
      <div class="detailCont detailDialogFont twoDetailStyle">
        <ul>
          <li>
            <b>设备</b>
            <span>{{ detailInfo.equipName}}{{ detailInfo.equipCode ? '【' + detailInfo.equipCode + '】' : '' }}</span>
          </li>
          <li>
            <b>故障分类</b>
            <span>{{ detailInfo.classifyName }}</span>
          </li>
          <li>
            <b>故障发生时间</b>
            <span>{{ detailInfo.faultTime }}</span>
          </li>
          <li>
            <b>紧急度</b>
            <span>{{ detailInfo.emergency }}</span>
          </li>
          <li>
            <b>申请人</b>
            <span>{{ detailInfo.applyUserName }}</span>
          </li>
          <li class="oneHang">
            <b>故障描述</b>
            <span>{{ detailInfo.faultRemark }}</span>
          </li>
          <li>
            <b>状态</b>
            <span v-if="detailInfo.status == '1'">新建</span>
            <span v-else-if="detailInfo.status == '2'">已下达</span>
            <span v-else-if="detailInfo.status == '3'">维修中</span>
            <span v-else>已完成</span>
          </li>
        </ul>
        <div v-if="this.detailInfo.status == '1'">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
            <el-row>
              <el-form-item label="维修方式" prop="repairMethod">
                <el-radio-group v-model="ruleForm.repairMethod" @change="radioChange">
                  <el-radio :label="1">内修</el-radio>
                  <el-radio :label="2">外修</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="责任人" prop="responsiblePerson">
                  <el-select v-model="ruleForm.responsiblePerson" :disabled="ruleForm.repairMethod == '2'" style="width: 100%">
                    <el-option v-for="item in userAllList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="确认人" prop="confirmBy">
                  <el-select v-model="ruleForm.confirmBy" style="width: 100%">
                    <el-option v-for="item in userAllList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="维保商" prop="maintainCompany">
                  <el-input v-model="ruleForm.maintainCompany" :disabled="ruleForm.repairMethod == '1'" maxlength="20" show-word-limit />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="期望解决时间" prop="expectedResolutionTime">
                  <el-date-picker v-model="ruleForm.expectedResolutionTime" :clearable="false" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择日期" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <p style="text-align:right;">
            <el-button type="primary" icon="el-icon-check" @click="confirmBtn('ruleForm')">维修确认</el-button>
          </p>
        </div>
      </div>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  props: {
    userAllList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      detailInfo: {},
      dialogVisible: false, // 对话框状态
      ruleForm: {
        expectedResolutionTime: '',
        id: '',
        maintainCompany: '',
        repairMethod: 1,
        responsiblePerson: '',
        confirmBy: ''
      },
      rules: {
        responsiblePerson: [
          { required: true, message: '责任人不能为空！', trigger: 'change' }
        ],
        expectedResolutionTime: [
          { required: true, message: '期望解决时间不能为空！', trigger: 'blur' }
        ],
        repairMethod: [
          { required: true, message: '维修方式不能为空！', trigger: 'change' }
        ],
        maintainCompany: [
          { required: false, message: '维修公司不能为空！', trigger: 'blur' }
        ],
        confirmBy: [
          { required: true, message: '确认人不能为空！', trigger: 'change' }
        ]
      }
    }
  },

  watch: {},

  mounted() {},

  methods: {
    async getInfo(row) {
      const res = await this.$axios.get(
        `/equip/repair/order/detail?id=${row.id}`
      )
      if (res && res.data.code === 200) {
        this.detailInfo = res.data.data
        this.dialogVisible = true
      }
    },
    /* 维修方式切换事件 */
    radioChange(value) {
      if (Number(value) === 2) {
        this.rules.maintainCompany[0].required = true
      } else {
        this.ruleForm.maintainCompany = ''
        this.rules.maintainCompany[0].required = false
      }
      if (Number(value) === 1) {
        this.rules.responsiblePerson[0].required = true
      } else {
        this.ruleForm.responsiblePerson = ''
        this.rules.responsiblePerson[0].required = false
      }
    },
    /* 维修确认 */
    confirmBtn(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.ruleForm.id = this.detailInfo.id
          const res = await this.$axios.post(
            '/equip/repair/order/confirm',
            this.ruleForm
          )
          if (res?.data.code === 200) {
            this.$notify.success('提交成功！')
            this.dialogVisible = false
            this.$emit('getTableInfo', 1)
          } else {
            this.$notify.error(res.data.msg)
          }
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>

<style lang="scss">
</style>
